<!-- table组件-->
<template>
    <div style="width:100%;overflow-x:auto">
        <el-table :data="tableData" border stripe style="width: 100%" class="table-list"  >
                <el-table-column v-if="hasSera" type="index" label="序号" width="50" align="center" ></el-table-column>
                <template v-for="({label,prop,btns,fn,},idx) in newTableInfos" >
                    <template v-if="prop != 'changeBtn'">
                        <el-table-column  :prop="prop" :key="idx" :label="label"     align="center" :show-overflow-tooltip="true" >
                            <template slot-scope="scope">
                                <template v-if="prop == 'updateTime' || prop == 'operateTime' || prop == 'createDate'" >
                                    {{scope.row[prop] | getTimeString}}
                                </template>
                                <!-- 表格内按钮（除去操作） -->
                                <template v-else-if="prop == 'btn'">
                                     <el-button 
                                        v-for="(btnItem,btnIdx) in btns" 
                                        :key="btnIdx" type="text" 
                                        :disabled="btnItem.disabled" 
                                        @click="btnItem.fn(btnItem.type,scope.$index)">{{btnItem.label}}</el-button>
                                </template>
                                <template v-else>
                                       {{tableFormatter?tableFormatter(prop,scope.row[prop]):scope.row[prop]}}
                                </template>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column  :prop="prop" :key="idx" :label="label"  align="center" :width="tableChangeBtns.length*60"  fixed="right" >
                            <template slot-scope="scope">
                                <el-button 
                                    v-for="(btnItem,btnIdx) in activeBtn?activeBtn(scope.row,tableChangeBtns):tableChangeBtns" 
                                    :key="btnIdx" type="text" 
                                    :disabled="btnItem.disabled" 
                                    @click="btnItem.fn(btnItem.type,scope.$index,scope.row)">{{btnItem.label}}</el-button>
                                    <!-- 操作方法返回类型和index -->
                            </template>
                        </el-table-column>
                    </template>
                </template>
        </el-table>
    </div>
        
    
</template>
<script>
import api from '@/api/apiPath'
import utils from '@/common/utils'
export default {
	data () {
		return {
           newTableInfos:[],
        }
    },
    methods:{
        defaultFormatter(row, column, cellValue, index){
            return cellValue;
        },
	},
	created () {
        //如果是只读，去掉表头操作按钮一栏
        this.newTableInfos = this.tableInfos;
        if(!this.tableReadonly) return ;
        this.newTableInfos = this.tableInfos.filter((item,idx)=>{
            return item.prop !='changeBtn';
        })
    },
    props:[
        'tableData', //table数据
        'tableInfos',//表格信息{label:'',prop:''}
        'tableChangeBtns',//操作按钮
        'tableFormatter',//格式化数据方法
        'hasSera',//是否含有序号
        'activeBtn',//操作按钮显示规则
        'tableReadonly'//只读 不显示操作按钮,无操作按钮不影响
        ],
	destroyed() {
		
    },
    filters: {
        getTimeString(time){
            return utils.getTimeString(time);
        }
	}


}

</script>

<style lang="stylus">
.table-lissst.el-table{
    .cell{
        white-space:normal !important;
    }
}
</style>
